<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通知</title>
    
    <link  rel="stylesheet"  href="<%=path%>/myoa/scripts/layui/css/layui.css"  media="all">
    <script type="text/javascript" src="<%=path%>/myoa/scripts/layui/layui.js" charset="utf-8"></script>
    <script src="<%=path%>/myoa/scripts/js/jquery-2.1.1.min.js"></script>
    <script src="<%=path%>/myoa/scripts/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="<%=path%>/myoa/scripts/css/bootstrap.min.css" />
    <script src="<%=path%>/myoa/scripts/js/vue.min.js"></script>
    <script src="<%=path%>/myoa/scripts/js/vue.js"></script>
    <style>
        h3{
            padding-left: 5%;
        }
        .table_notice{
            width: 60%;
            margin: 30px 0 0 100px;
        }
        #addnotice{
            float: right;
            margin-right: 15px;
        }
    </style>
</head>
<body>
<div id="main">
    <h3><a href="#">信息发布</a>>通知列表</h3>
    <div class="table_notice">
        <table class="table table-bordered">
            <tr class="success">
            <% session.setAttribute("mess_userid", 1);%>
                <td colspan="5">通知列表 
                 <button class="close" data-dismiss="modal" aria-hidden="true" id="addnotice">添加</button>
                </td>
            </tr>
            <tr class="info">
                <th>名称</th>
                <th>发布人</th>
                <th>通知时间</th>
                <th>操作</th>
            </tr>
            <tr v-for="mess in mlist" >
                <td><a href="../showmess?id={{mess.mess_id}}" >{{mess.mess_headline}}</td>
                <td>{{mess.user_name}}</td>
                <td>{{mess.mess_time}}</td>
                <td>
                	<input type="hidden" v-model="mess.mess_id" id="dltid">
                	<button type="button" class="btn btn-danger" v-on:click="deletemess()">删除</button>
                </td>
            </tr>
        </table>
       	 <div id="fenye"></div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <tr>
				    	<td>标题:<input type="text" name="mess_headline" id="messHead"></td><br />
				        <td>内容:<textarea cols="40" rows="6" name="mess_content" id="content"></textarea></td>
					</tr>  
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary" data-dismiss="modal" id="submit" v-on:click="insertmess()">提交</button>
                </div>
            </div>
        </div>
    </div> 
    
</div>
<script type="text/javascript">
$(function(){

	var vue=new Vue({
		el:"#main",
		data:{
			mlist:'',
		},
		methods:{
			
			showmessgae:function(curr){		//首页面展示信息，通知
				$.ajax({
					url:'../querymess',
					type:'post',
					data:{curr:curr},
					dataType:'json',
					success:function(result){
						console.log("输出测试"+result);
						vue.mlist=result.mlist;
						
						layui.use(['laypage', 'layer'], function(){		//layPage的固定格式，分页
							var laypage = layui.laypage,
							layer = layui.layer;
							laypage.render({
								elem:'fenye',			//作用域	
								curr:curr,				//当前页
								count:result.total,		//获取总数	
								limit:4,  				//获取每页显示 
								layout: ['count', 'prev', 'page', 'next', 'skip'], 
								jump:function(obj,first){
									console.log(".............");
									if(!first){
										vue.showmessgae(obj.curr);
									}
								}
							})
						});
					}
				})
			},
			deletemess:function(){					//删除通知方法
				
				var meid=$("#dltid").val();
				console.log("获取前台id"+meid);
				$.ajax({
					url:'../deletemess',
					type:'post',
					data:{meid:meid},
					dataType:'json',
					success:function(result){
						console.log("删除返回值测试"+result);
						if(result!=0){
							alert("成功");
							location.reload();
							return;
						}else{
							alert("炸了");
							location.reload();
							return;
						}
						
					}
				})
			},
			insertmess:function(){							//添加通知方法
				var mess_headline=$("#messHead").val();
				var mess_content=$("#content").val();
				if(mess_headline==''){
					alert("标题为空");
					location.reload();
				}
				if(mess_content==''){
					alert("内容为空");
					location.reload();
				}else{
					console.log("insert测试");
					$.ajax({
						url:'../insertmess',
						type:'post',
						data:{mess_headline:mess_headline,mess_content:mess_content},
						dataType:'json',
						success:function(result){
							console.log("删除返回值测试"+result);
							if(result!=0){
								alert("成功");
								location.reload();
								return;
							}else{
								alert("炸了");
								location.reload();
								return;
							}
						}
					})
				}
			} 
		
		}
	});
	
	$("#addnotice").click(function(){		//使用了bootstrap的模态框，触发方法
		$("#myModal").modal("show");
	});
	vue.showmessgae(1);								//调用
});
</script>
</body>
